<template>
  <el-drawer title="部门成员列表" v-model="visible" size="80%">
    <el-form
      size="small"
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="关键词">
        <el-input
          v-model="formInline.keyword"
          placeholder="姓名/联系电话"
        ></el-input>
      </el-form-item>
      <el-form-item label="工号">
        <el-input
          v-model="formInline.job_id"
          placeholder="请输入完整工号"
        ></el-input>
      </el-form-item>
      <el-form-item label="入职时间">
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker
            v-model="formInline.join_time"
            type="daterange"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="getTableInfo"
          >查询</el-button
        >
        <!-- <el-button
          type="primary"
          icon="Plus"
          @click="handleInfo(0)"
          v-auth="'staff/add'"
          >添加部门成员</el-button
        > -->
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      row-key="user_id"
      default-expand-all
      height="90%"
      stripe
    >
      <el-table-column type="index" label="#" sortable />
      <el-table-column prop="user_id" label="会员ID" />
      <el-table-column prop="user.real_name" label="姓名" />
      <el-table-column prop="job_id" label="工号" />
      <el-table-column label="职位">
        <template #default="scope">
          {{
            scope.row.type == 0 ? "员工" : scope.row.type == 1 ? "主管" : "经理"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="user.mobile" label="手机号" />
      <el-table-column prop="station.title" label="岗位" />
      <el-table-column prop="join_time" label="入职日期" width="120px" />
      <el-table-column prop="status_text" label="状态" width="60px" />
      <el-table-column prop="regular_time" label="转正日期" width="120px" />
      <el-table-column prop="leave_time" label="离职日期" width="120px" />
      <el-table-column label="操作" width="240px" fixed="right">
        <template #default="scope">
          <el-button
            type="primary"
            link
            icon="Edit"
            @click="handleInfo(scope.row.user_id)"
            v-auth="'staff/edit'"
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            link
            icon="Edit"
            @click="handleTrain(scope.row)"
            v-auth="'staff/edit'"
            :disabled="scope.row.type > 0 || scope.row.in_train"
          >
            加入培训班
          </el-button>
          <el-button
            type="primary"
            link
            icon="Search"
            @click="handleExamine(scope.row)"
            v-auth="'examine_add'"
            >添加考核</el-button
          >
          <el-button
            type="danger"
            link
            icon="DeleteFilled"
            @click="delInfo(scope.row.id)"
            v-auth="'staff/del'"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      :current-page="curPage"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <InfoDialog @getTable="getTableInfo" ref="infoRef"></InfoDialog>
    <ExamineDrawer ref="examineRef" />
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { delApi, getListAPi } from "@/api/company/staff";
import InfoDialog from "./StaffInfo.vue";
import ExamineDrawer from "./examineDrawer.vue";
import { addStudentApi } from "@/api/company/train";
const tableData = ref([]);
const visible = ref(false);
const department_id = ref(0);
const examineRef = ref<any>(null);
const formInline = reactive({
  keyword: "",
  join_time: [],
  job_id: "",
  check_train: 1,
});
const curPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const infoRef = ref<any>(null);
function getTableInfo() {
  getListAPi({
    department_id: department_id.value,
    page: curPage.value,
    page_size: pageSize.value,
    ...formInline,
  }).then((res) => {
    tableData.value = res.data.data;
    total.value = res.data.total;
  });
}
const handleSizeChange = (e: any) => {
  pageSize.value = e;
  getTableInfo();
};
const handleCurrentChange = (e: any) => {
  curPage.value = e;
  getTableInfo();
};
function delInfo(id: number) {
  ElMessageBox.confirm("确认要删除此员工吗?", "警告！", {
    confirmButtonText: "确认删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delApi(id).then((res: any) => {
        getTableInfo();

        ElMessage({
          type: "success",
          message: "删除成功！",
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除已取消",
      });
    });
}

function handleInfo(user_id?: number) {
  infoRef.value.dialogOpen(user_id, department_id.value);
}
function handleOpen(id) {
  department_id.value = id;
  visible.value = true;
  getTableInfo();
}
function handleTrain(e: any) {
  addStudentApi({
    user_id: e.user_id,
  }).then((res) => {
    e.in_train = 1;
    ElMessage.success("添加成功");
  });
}
function handleExamine(e: any) {
  examineRef.value.dialogOpen(e.user_id, e.department_id);
}
defineExpose({
  handleOpen,
});
</script>

<style scoped>
.table-box {
  height: calc(100% - 200px);
}
</style>
